<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Online Drawing</title>
<style>
.cross {
	cursor: crosshair;
}
</style>
<script>
	var oldX;
	var oldY;
	function init() {
		canvas = document.getElementById("example");
		context = canvas.getContext("2d");
		canvas.width = 700;
		canvas.height = 500;
		drag = false;
		eraser = false;
		size = 2;

		context.fillStyle = "white";
		context.fillRect(0, 0, canvas.width, canvas.height);
		context.strokeStyle = "black";
		context.strokeRect(0, 0, canvas.width, canvas.height);
		context.fillStyle = 'white'; // белый
		context.fillRect(10, 10, 20, 20);
		context.fillStyle = 'black'; // черный
		context.fillRect(30, 10, 20, 20);
		context.fillStyle = '#bbbbbb'; // светло серый
		context.fillRect(10, 30, 20, 20);
		context.fillStyle = '#505050'; // темно серый
		context.fillRect(30, 30, 20, 20);
		context.fillStyle = '#ff0000'; // красный
		context.fillRect(10, 50, 20, 20);
		context.fillStyle = '#960018'; // бордовый
		context.fillRect(30, 50, 20, 20);
		context.fillStyle = '#ffff00'; // желтый
		context.fillRect(10, 70, 20, 20);
		context.fillStyle = '#b5a642'; // горчичный
		context.fillRect(30, 70, 20, 20);
		context.fillStyle = '#99ff99'; // салатовый
		context.fillRect(10, 90, 20, 20);
		context.fillStyle = '#2e8b57'; // зеленый
		context.fillRect(30, 90, 20, 20);
		context.fillStyle = '#00ffff'; // светло бирюзовый
		context.fillRect(10, 110, 20, 20);
		context.fillStyle = '#008080'; // темно бирюзовый
		context.fillRect(30, 110, 20, 20);
		context.fillStyle = '#0000ff'; // синий
		context.fillRect(10, 130, 20, 20);
		context.fillStyle = '#000080'; // темно синий
		context.fillRect(30, 130, 20, 20);
		context.fillStyle = '#ff00ff'; // пурпурный
		context.fillRect(10, 150, 20, 20);
		context.fillStyle = '#991199'; // фиолетовый
		context.fillRect(30, 150, 20, 20);
		context.fillStyle = '#fbec5d'; // кукурузный
		context.fillRect(10, 170, 20, 20);
		context.fillStyle = '#dad871'; // вердепешевый
		context.fillRect(30, 170, 20, 20);
		context.fillStyle = '#00a86b'; // нефритовый
		context.fillRect(10, 190, 20, 20);
		context.fillStyle = '#013220'; // темно зеленый
		context.fillRect(30, 190, 20, 20);
		context.fillStyle = '#42aaff'; // голубой
		context.fillRect(10, 210, 20, 20);
		context.fillStyle = '#007fff'; // лазурный
		context.fillRect(30, 210, 20, 20);
		context.fillStyle = '#c9a0dc'; // глициниевый
		context.fillRect(10, 230, 20, 20);
		context.fillStyle = '#1560bd'; // джинсовый
		context.fillRect(30, 230, 20, 20);
		context.fillStyle = '660099'; // темно фиолетовый
		context.fillRect(10, 250, 20, 20);
		context.fillStyle = '#de3163'; // розовый
		context.fillRect(30, 250, 20, 20);
		context.fillStyle = '#ff9900'; // оранжевый
		context.fillRect(10, 270, 20, 20);
		context.fillStyle = '#654321'; // коричневый
		context.fillRect(30, 270, 20, 20);

		context.fillStyle = "black";
		context.strokeStyle = "black";

		context.strokeRect(10, 10, 40, 280);
		context.strokeRect(60, 10, 0, 480);
		context.strokeRect(4, 318, 53, 25);
		context.strokeRect(4, 363, 53, 25);

		context.font = "italic 10pt Arial";
		context.fillText("Ластик", 6, 315);
		context.strokeRect(7, 330, 2, 2);
		context.strokeRect(14, 328, 6, 6);
		context.strokeRect(25, 325, 10, 10);
		context.strokeRect(40, 323, 15, 15);

		context.fillText("Кисть", 9, 360);
		context.fillRect(7, 375, 2, 2);
		context.fillRect(14, 373, 6, 6);
		context.fillRect(25, 370, 10, 10);
		context.fillRect(40, 368, 15, 15);

		canvas.onmousedown = mouseDown;
	}
	function mouseDown(evt) {
		var mouseX = evt.pageX;
		var mouseY = evt.pageY;
		if ((mouseX > 79) && (mouseY > 9)) {
			drag = true;
			if ((mouseX - 9 + size < 700) && (mouseY - 9 + size < 500)) {
				if (eraser) {
					context.clearRect(mouseX - 9, mouseY - 9, size, size);
				} else {
					context.fillRect(mouseX - 9, mouseY - 9, size, size);
				}
			}
			oldX = mouseX;
			oldY = mouseY;
			canvas.onmousemove = mouseMove;
			canvas.onmouseup = mouseUp;
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 20)
				&& (mouseY < 40)) {
			context.fillStyle = "white";
			context.strokeStyle = "white";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 20)
				&& (mouseY < 40)) {
			context.fillStyle = "black";
			context.strokeStyle = "black";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 40)
				&& (mouseY < 60)) {
			context.fillStyle = "#bbbbbb";
			context.strokeStyle = "#bbbbbb";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 40)
				&& (mouseY < 60)) {
			context.fillStyle = "#505050";
			context.strokeStyle = "#505050";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 60)
				&& (mouseY < 80)) {
			context.fillStyle = "#ff0000";
			context.strokeStyle = "#ff0000";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 60)
				&& (mouseY < 80)) {
			context.fillStyle = "#960018";
			context.strokeStyle = "#960018";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 80)
				&& (mouseY < 100)) {
			context.fillStyle = "#ffff00";
			context.strokeStyle = "#ffff00";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 80)
				&& (mouseY < 100)) {
			context.fillStyle = "#b5a642";
			context.strokeStyle = "#b5a642";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 100)
				&& (mouseY < 120)) {
			context.fillStyle = "#99ff99";
			context.strokeStyle = "#99ff99";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 100)
				&& (mouseY < 120)) {
			context.fillStyle = "#2e8b57";
			context.strokeStyle = "#2e8b57";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 120)
				&& (mouseY < 140)) {
			context.fillStyle = "#00ffff";
			context.strokeStyle = "#00ffff";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 120)
				&& (mouseY < 140)) {
			context.fillStyle = "#008080";
			context.strokeStyle = "#008080";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 140)
				&& (mouseY < 160)) {
			context.fillStyle = "#0000ff";
			context.strokeStyle = "#0000ff";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 140)
				&& (mouseY < 160)) {
			context.fillStyle = "#000080";
			context.strokeStyle = "#000080";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 160)
				&& (mouseY < 180)) {
			context.fillStyle = "#ff00ff";
			context.strokeStyle = "#ff00ff";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 160)
				&& (mouseY < 180)) {
			context.fillStyle = "#991199";
			context.strokeStyle = "#991199";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 180)
				&& (mouseY < 200)) {
			context.fillStyle = "#fbec5d";
			context.strokeStyle = "#fbec5d";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 180)
				&& (mouseY < 200)) {
			context.fillStyle = "#dad871";
			context.strokeStyle = "#dad871";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 200)
				&& (mouseY < 220)) {
			context.fillStyle = "#00a86b";
			context.strokeStyle = "#00a86b";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 200)
				&& (mouseY < 220)) {
			context.fillStyle = "#013220";
			context.strokeStyle = "#013220";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 220)
				&& (mouseY < 240)) {
			context.fillStyle = "#42aaff";
			context.strokeStyle = "#42aaff";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 220)
				&& (mouseY < 240)) {
			context.fillStyle = "#007fff";
			context.strokeStyle = "#007fff";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 240)
				&& (mouseY < 260)) {
			context.fillStyle = "#c9a0dc";
			context.strokeStyle = "#c9a0dc";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 240)
				&& (mouseY < 260)) {
			context.fillStyle = "#1560bd";
			context.strokeStyle = "#1560bd";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 260)
				&& (mouseY < 280)) {
			context.fillStyle = "#660099";
			context.strokeStyle = "#660099";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 260)
				&& (mouseY < 280)) {
			context.fillStyle = "#de3163";
			context.strokeStyle = "#de3163";
		} else if ((mouseX > 20) && (mouseX < 40) && (mouseY > 280)
				&& (mouseY < 300)) {
			context.fillStyle = "#ff9900";
			context.strokeStyle = "#ff9900";
		} else if ((mouseX > 40) && (mouseX < 60) && (mouseY > 280)
				&& (mouseY < 300)) {
			context.fillStyle = "#654321";
			context.strokeStyle = "#654321";
		} else if ((mouseX > 14) && (mouseX < 65) && (mouseY > 328)
				&& (mouseY < 353)) {
			eraser = true;
			if ((mouseX > 14) && (mouseX < 22)) {
				size = 2;
			} else if ((mouseX > 24) && (mouseX < 32)) {
				size = 6;
			} else if ((mouseX > 35) && (mouseX < 47)) {
				size = 10;
			} else if ((mouseX > 50) && (mouseX < 65)) {
				size = 15;
			}
		} else if ((mouseX > 14) && (mouseX < 65) && (mouseY > 373)
				&& (mouseY < 398)) {
			eraser = false;
			if ((mouseX > 14) && (mouseX < 22)) {
				size = 2;
			} else if ((mouseX > 24) && (mouseX < 32)) {
				size = 6;
			} else if ((mouseX > 35) && (mouseX < 47)) {
				size = 10;
			} else if ((mouseX > 50) && (mouseX < 65)) {
				size = 15;
			}
		}
	}
	function mouseMove(evt) {
		var mouseY = evt.pageY;
		var mouseX = evt.pageX;
		if (drag) {
			if ((mouseX > 79) && (mouseY > 9)) {
				if ((mouseX - 9 + size < 700) && (mouseY - 9 + size < 500)) {
					if (eraser) {
						context.clearRect(mouseX - 9, mouseY - 9, size, size);
					} else {
						context.lineWidth = size;
						context.beginPath();
						context.moveTo(oldX - 9, oldY - 9);
						context.lineTo(mouseX - 9, mouseY - 9);
						context.closePath();
						context.stroke();
					}
					oldX = mouseX;
					oldY = mouseY;
				}
				;
			}
			;
		}
		;
	}
	function mouseUp(evt) {
		drag = false;
	};
</script>
</head>
<body>
<body onload="init()" ; class="cross">
	<canvas id="example"> </canvas>
</body>
</html>